<template>
  <div class="btn-container">
    <button type="button" class="btn me-2" @click="onBtnclick(0)" :class="active==0?'btn-outline-primary':'btn-outline-secondary'">全部</button>
    <button type="button" class="btn me-2" @click="onBtnclick(1)" :class="active==1?'btn-outline-success':'btn-outline-secondary'">已完成</button>
    <button type="button" class="btn me-2" @click="onBtnclick(2)" :class="active==2?'btn-outline-danger':'btn-outline-secondary'">未完成</button>
  </div>
</template>

<script>
export default {
  name: 'TodoButton',
  emits: ['update:active'],
  props: {
    active: {
      type: Number,
      required: true,
      // 激活的按钮默认选项 0全部 1 已完成 2 未完成
      default: 0
    }
  },
  methods: {
    onBtnclick(index) {
      if (index == this.active) return;
      this.$emit('update:active', index);
    }
  }
};
</script>

<style scoped>
.btn-container {
  width: 400px;
  text-align: center;
}
</style>